<!-- 计划 -->
<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="true">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">房间</div>
			</div>
		</template>

		<template #default>
			<el-container class="zs-drawer-container">
				<el-scrollbar class="zs-drawer-content">
					<!-- card1 -->
					<div class="zs-align-center zs-space-bottom" id="sm-drawer-demo-card-01">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">基本信息</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<HsForm :filed-list="residenceFiledList" ref="infoForm" :isDisabled="true"></HsForm>
					</div>
					<!-- card3 -->
					<EffectAndFailureTime ref="effectTimeRef" title="生效状态" id="effect-and-failure-time" :isReadOnly="true" labelWidth="110px" />
					<!-- card4 -->
					<CreateUserInfo ref="createDataRef" title="创建信息" id="create-user-info" />
				</el-scrollbar>
				<hsDocWrapper :nodeList="curNodeList" />
			</el-container>
		</template>
	</el-drawer>
</template>

<script setup>
	import { residenceRoomInfoListApi } from '@/api/residence.js';
	import EffectAndFailureTime from '@/components/effectAndFailureTime.vue';
	import CreateUserInfo from '@/components/createUserInfo.vue';
	import HsForm from '@/components/hsForm.vue';
	import { residenceFiledList } from '@/config/form/residence.js';
	import { ref, reactive, watch, nextTick } from 'vue';
	import { useStore } from 'vuex';

	const props = defineProps({
		isShow: { type: Boolean, default: false },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
	});

	let store = useStore();
	let dictObj = store.getters.getDictObj(['PROPERTY_CERTIFICATE_TYPE']);
	const curDrawerSize = ref(store.state.uiDrawerSize);

	const emit = defineEmits(['close']);

	let isShowDrawer = ref(props.isShow);

	let formData = reactive({ data: { attachmentUrlList: [] } });

	const curNodeList = ref([
		{ name: '证件信息', id: 'sm-drawer-demo-card-01' },
		{ name: '生效状态', id: 'effect-and-failure-time' },
		{ name: '创建信息', id: 'create-user-info' },
	]);

	const infoForm = ref();
	let effectTimeRef = ref();
	let createDataRef = ref();

	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			isShowDrawer.value = newVal;
			nextTick(() => {
				newVal && getInfo(props.currentRow.unitHouseId);
			});
		},
	);

	//详情
	const getInfo = async id => {
		let res = await residenceRoomInfoListApi({ unitHouseId: id });
		if (res.data.code !== 200) return;
		formData.data = Object.assign(res.data.data);
		infoForm.value.setFiledVal(formData.data);
		effectTimeRef.value.setTime({ effectTime: formData.data.startTime, expireTime: formData.data.endTime });
		nextTick(() => {
			createDataRef.value.setData(formData.data);
		});
	};

	//关闭抽屉
	const handleClose = done => {
		effectTimeRef.value.restTime();
		emit('close', { isShow: false });
		done();
	};
</script>
